import React from 'react'
import ContentTitle from "@/components/contentTitle/ContentTitle";
import { Button, Form, Input, Select, message } from 'antd';
import { addUser } from "@/api/users";
const { Option } = Select;

export default function AccountAdd() {
  const [form] = Form.useForm();
  const onFinish = async values => {
    const { code, msg } = await addUser(values);
    if (code === 0) {
      message.success(msg);
      //清空表单
      form.resetFields();
    } else {
      message.error(msg);
    }
  };
  const onFinishFailed = errorInfo => {
    message.error('请先输入必填项');
  };
  return (
    <>
      <ContentTitle title="添加账号" />
      <div>
        <Form name='basic'
          form={form}
          style={{ maxWidth: 600,marginTop: 20 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="account"
            rules={[{ required: true, message: '请输入账号!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input type='password' autoComplete='off' />
          </Form.Item>

          <Form.Item
            label="用户组"
            name="userGroup"
            rules={[{ required: true, message: '请选择用户组!' }]}
          >
            <Select>
              <Option value='超级管理员'>超级管理员</Option>
              <Option value='普通管理员'>普通管理员</Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">立即添加</Button>
            <Button htmlType="button" style={{ marginLeft: '10px' }} onClick={() => form.resetFields()}>
              重置
            </Button>
          </Form.Item>
        </Form>
      </div>
    </>
  )
}
